<template>
  <div class="carManage">
    <div class="list" v-for="(item, index) in list" :key="index">
      <div class="list-item">{{ item.license_no }}</div>
      <div class="list-tag" v-if="item.group_name">{{ item.group_name }}</div>
    </div>
    <div class="loadTxt" v-if="page < total_page" @click="getMoreData">点击加载更多</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.post("plugin.wechat-chat-sidebar.frontend.controller.carManage.index", {}, "");
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      this.page = this.page + 1;
      let { data, msg, result } = await $http.post("plugin.wechat-chat-sidebar.frontend.controller.carManage.index", { page: this.data.page }, "");
      if (result) {
        this.list = this.list.concat(data.data);
        this.isLoadMore = true;
      } else {
        this.page = this.page - 1;
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.carManage {
  padding-bottom: 3rem;
}
.list {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem 0.75rem;
  margin: 0.63rem 0.63rem 0 0.63rem;
  box-sizing: border-box;
  .list-item {
    font-weight: bold;
    font-size: 1.31rem;
    color: #00001c;
  }
  .list-tag {
    padding: 0.19rem 0.28rem;
    border-radius: 0.25rem;
    background: #feeded;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: #f15353;
  }
}
.loadTxt {
  text-align: center;
  margin: 1rem 0;
}
</style>
